#{extends 'map.html' /}
#{set title:'Dojo' /}

#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/base_style.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/common.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/albums.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/album.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/photo.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/header.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/javascripts/my_widgets/AuthorWidget/css/AuthorWidget.css'}">
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/javascripts/dojo-release-1.7.2/dijit/themes/tundra/tundra.css'}">
#{/set}


#{set 'moreScripts'}
<!-- Configure Dojo -->
<script type="text/javascript" charset="${_response_encoding}">
    // We're specifying our Dojo Configuration this way,
    // as it's a bit more complex and easier to type out
    // than a data-dojo-config string
//    var dojoConfig = (function(){
//        console.log(location.href);
//        var base = location.href.split("/");
//        base.pop();
//        base = base.join("/");
//        console.log(base);
//        return {
//            async: true,
//            isDebug: true,
//            packages: [{
//                name: "my_widgets",
//                location: "/public/javascripts/my_widgets"
//            }]
//        };
//    })();
    require({
        parseOnLoad: true,
        baseUrl: "/public/javascripts/",
        packages: [
            { name: "my_widgets", location: "my_widgets" }
        ]
    }, [ "my_widgets/AuthorWidget" ]);

</script>
    <script src="@{'/public/javascripts/footer.js'}" type="text/javascript" charset="${_response_encoding}"></script>
*{<script src="@{'/public/javascripts/dojo-release-1.7.2/dojo/dojo.js'}" data-dojo-config="async: true" type="text/javascript" charset="${_response_encoding}"></script>}*
    <script src="@{'/public/javascripts/dojohelloworld.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/gallerySample.js'}" type="text/javascript" charset="${_response_encoding}"></script>
*{<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>}*
#{/set}
*{#{kostroma /}}*
*{#{welcome /}}*
*{#{header /}}*
*{#{footer /}}*

<h1>Hello World Example</h1>
<hr/>
<label for="txtName">Your Name:</label>
<input id="txtName" type="text" dojoType="dijit.form.TextBox"/><br/>
<button id="btnSayHello" dojoType="dijit.form.Button">Say Hello</button>
<div>
    <h1>Demo: Custom Widget</h1>
    <div id="authorContainer"></div>
    <script type="text/javascript" charset="${_response_encoding}">
        // Bring in our custom widget
        require(["dojo/_base/xhr", "dojo/dom", "dojo/_base/array", "my_widgets/AuthorWidget", "dojo/domReady!"],
                function(xhr, dom, arrayUtil, AuthorWidget){
                    // Load up our authors
                    var def = xhr.get({
                        url: "@{'/public/javascripts/authors.json'}",
                        handleAs: "json"
                    });

                    // Once ready, process the authors
                    def.then(function(authors){
                        // Get a reference to our container
                        var authorContainer = dom.byId("authorContainer");

                        arrayUtil.forEach(authors, function(author){
                            // Create our widget and place it
                            var widget = new AuthorWidget(author).placeAt(authorContainer);
                        });
                    });
                });

        require(["my/TimeSpendInVk"], function(TimeSpendInVk){
            var anon  = new TimeSpendInVk(),
                    alice = new TimeSpendInVk({ name: "Alice", age: 42, residence: "Universe 1" });

            console.log(anon.name, alice.name); // "Anonymous", "Alice"
            console.log(anon.residence, alice.residence); // "Universe A", "Universe 1"
            alice.moveTo("Universe 420");
            console.log(alice.residence); // "Universe 420"
        });
    </script>
</div>